<template>
  <el-dialog
    title="规格"
    width="60%"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-table
      ref="table"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <!--@selection-change="selectionChangeHandle"-->
      <!--<el-table-column-->
        <!--type="selection"-->
        <!--header-align="center"-->
        <!--align="center"-->
        <!--width="30">-->
      <!--</el-table-column>-->
      <el-table-column
        width="170"
        prop="imgPath"
        label="图片"
        header-align="center"
        align="center">
        <template slot-scope="scope">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :before-upload="checkFile"
            :on-success="((res, file, fileList) => {skuImgSuccess(res, file, fileList ,scope.$index)})">
            <img style="max-width: 80px" v-if="scope.row.imgPath" :src="scope.row.imgPath" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column
        width="170"
        prop="specs"
        label="规格"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="vipPrice"
        label="商城售价"
        header-align="center"
        align="center">
      <!-- <template slot-scope="scope">
        <el-input v-model="scope.row.vipPrice" placeholder="" @change="checkNumber(scope.row.vipPrice,false)" ></el-input>
      </template> -->
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品原价"
        header-align="center"
        align="center">
        <!-- <template slot-scope="scope">
          <el-input v-model="scope.row.price" placeholder="" @change="checkNumber(scope.row.price,false)" ></el-input>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="count"
        label="库存数量"
        header-align="center"
        align="center">
        <!-- <template slot-scope="scope">
          <el-input v-model="scope.row.count" placeholder="" @change="checkNumber(scope.row.count,true)" ></el-input>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="integral"
        label="兑换积分"
        header-align="center"
        align="center">
        <!-- <template slot-scope="scope">
          <el-input v-model="scope.row.integral" placeholder="" @change="checkNumber(scope.row.integral,false)" ></el-input>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="goodsCostingPrice"
        label="商品利润"
        header-align="center"
        align="center">
        <!-- <template slot-scope="scope">
          <el-input v-model="scope.row.goodsCostingPrice" placeholder="" @change="checkNumber(scope.row.goodsCostingPrice,false)" ></el-input>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="giveIntegral"
        label="赠送积分"
        header-align="center"
        align="center">
        <!-- <template slot-scope="scope">
          <el-input v-model="scope.row.giveIntegral" placeholder="" @change="checkNumber(scope.row.giveIntegral,false)" ></el-input>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="weight"
        label="重量"
        header-align="center"
        align="center">
        <!-- <template slot-scope="scope">
          <el-input v-model="scope.row.weight" placeholder="" @change="checkNumber(scope.row.weight,false)" ></el-input>
        </template> -->
      </el-table-column>
      <!--<el-table-column-->
        <!--fixed="right"-->
        <!--header-align="center"-->
        <!--align="center"-->
        <!--width="80"-->
        <!--label="操作">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button type="text" size="small" @click="deleteHandle(scope.$index)">删除</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="modifySku()" :disabled="checkFlag">确定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
  export default {
    data: function () {
      return {
        action: '',
        checkFlag: false,
        flag: false,
        visible: false,
        goodsType: null,
        dataList: [],
        dataListLoading: false,
        id: null,
        dataListSelections: [],
        isActivityGoods: 0,
        activityTitle: ''
      }
    },
    watch: {
      'isActivityGoods': function (val) {
        if (val > 0) {
          this.$message('该商品已经添加到 【' + this.activityTitle + '】限时活动中')
          return false
        }
      }
    },
    methods: {
      checkFile (file) {
        let suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (suffix !== 'jpg' && suffix !== 'png') {
          this.$message.error('上传文件只能是 jsp、png格式!')
          return false
        }

        if (file.size > 1024 * 1024) {
          this.$message.error('上传图片大小不能超过1M！')
          return false
        }
      },
      // 文件上传成功的钩子函数
      skuImgSuccess (res, file, fileList, index) {
        this.$message({
          type: 'info',
          message: '图片上传成功',
          duration: 1000
        })
        if (res.code === 0) {
          this.$set(this.dataList[index], 'imgPath', res.data)
        }
      },
      checkInventory (goodsInventory, count) {
        if (parseInt(goodsInventory) > parseInt(count)) {
          this.checkFlag = true
          this.$message.error('活动库存不可以大于原有库存')
        }
        if (Math.sign(Number.parseFloat(goodsInventory)) === -1 || !Number.isInteger(Number.parseFloat(goodsInventory))) {
          this.checkFlag = true
          this.$message.error('数据不合法')
        } else {
          this.checkFlag = false
        }
      },
      checkNumber (value, flag) {
        let reg = ''
        if (flag) {
          // 整数
          reg = /^\d+$/
        } else {
          // 小数
          reg = /^(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,}$)$/
        }
        if (!reg.test(value)) {
          this.$message.error('数据不合法')
          this.checkFlag = true
        } else {
          this.checkFlag = false
        }
      },
      init (id, info) {
        this.$http({
          url: this.$http.adornUrl(`/goods/getIsActivityGoodsById/${id}`),
          method: 'get',
          data: this.$http.adornData()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.isActivityGoods = data.data.isActivityGoods
            this.activityTitle = data.data.activityTitle
          } else {
            this.$message.error(data.msg)
          }
        })
        this.action = this.$http.adornUrl(`/goods/uploadImg?token=${this.$cookie.get('token')}`)
        this.visible = true
        this.dataList = info
        this.id = id
      },
      // 表单提交
      modifySku () {
        if (this.isActivityGoods > 0) {
          this.$message.error('这款商品已经添加到限时活动中，暂不可修改！')
          return false
        }
        // 修改时
        this.$http({
          url: this.$http.adornUrl(`/goods/modifySkuById`),
          method: 'post',
          data: this.$http.adornData({
            'id': this.id,
            'goodsInventoryDetail': JSON.stringify(this.dataList)
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.$parent.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
        this.visible = false
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      deleteHandle (id) {
        this.dataList.splice(id, 1)
      }
    }
  }
</script>
